<template>
  <div class="Echarts">
    <div id="main1" style="width: 100%;height:500px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { selCustomerSourceCount } from "@/api/crm/index";

export default {
  props: {
    params: {startDate: '', endDate: ''}
  },
  name: 'CustomerSourceChart',
  data(){
    return {
      allValues: [],
      values: [],
      chart: null
    }
  },
  methods:{
    initChart() {
      this.chart = echarts.init(document.getElementById('main1'));
      this.setOptions(this.allValues, this.values)
    },
	  setOptions(allValues, values){

      this.chart.setOption({
			  title: [{
          text: '客户来源分析',
          subtext: '',
          left: 'left'
        },
        {
          subtext: '全部客户',
          left: '25%',
          top: '90%',
          textAlign: 'center'
        },
        {
          subtext: '成交客户',
          left: '75%',
          top: '90%',
          textAlign: 'center'
        }],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        label: {
          formatter: '{b} : {c}',
          minMargin: 5,
          edgeDistance: 10,
          lineHeight: 15,
          rich: {
            time: {
              fontSize: 10,
              color: '#999'
            }
          }
        },
        toolbox: {
          show: false,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [{
            name: '全部客户',
            type: 'pie',
            radius: [20, 140],
            center: ['25%', '50%'],
            roseType: 'radius',
            itemStyle: {
              borderRadius: 5
            },
            data: allValues
          },
          {
            name: '成交客户',
            type: 'pie',
            radius: [20, 140],
            center: ['75%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 5
            },
            data: values
          }
        ]
		  })
		},
    selSaleQuotaCount(params){
      params.isNotAll = '1';
      params.type = 'customer_source';
      selCustomerSourceCount(params).then(response => {
        this.values = response.data;
      });

      params.isNotAll = '';
      selCustomerSourceCount(params).then(response => {
        this.allValues = response.data;
        this.setOptions(this.allValues, this.values)
      });
      
      
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    })
  },
  watch: {
      //值改变时触发
      params: {
      　　handler(newValue, oldValue) {
            this.selSaleQuotaCount(this.params);
      　　},
          deep: true,
      　　immediate: true
      }
  }
}
</script>

<style>

</style>